<template>
  <div>
    <ant-table
      :columns="columns"
      :data="data"
      :status="status"
      @Change="Change"
      @handleSubmit="handleSubmit"
      @Reset="Reset"
      @onSelectChange="onSelectChange"
      @emptySelect="emptySelect"
      @Add="Add"
      @SureDelete="SureDelete"
      @SelectAction="SelectAction"
      @Delete="Delete"
      :selectedRowKeys="selectedRowKeys"
      add
      batch
      Bsearch
      Bexport
      Bimport
      more
      :actions="options"
    >
      <template #search>
        <a-form layout="inline">
          <a-form-item label="账号">
            <a-input v-model="form.account" placeholder="请输入账号" />
          </a-form-item>
          <a-form-item label="真实姓名">
            <a-input v-model="form.username" placeholder="请输入真实姓名"></a-input>
          </a-form-item>
          <a-form-item v-if="status" label="邮箱">
            <a-input v-model="form.email" placeholder="请输入邮箱"></a-input>
          </a-form-item>
          <a-form-item v-if="status" label="手机号">
            <a-input v-model="form.phone" placeholder="请输入手机号码"></a-input>
          </a-form-item>
        </a-form>
      </template>
    </ant-table>
    <!-- 打开抽屉 -->
    <open-drawer
      v-if="visible"
      :visible="visible"
      :title="title"
      @onClose="onClose"
      @Submit="Submit"
      :roleList="roleList"
    />
    <!-- <ul>
      <li>数据展示</li>
      <li v-for="(item,index) in data" :key="index">{{item.name}}</li>
    </ul> -->
  </div>
</template>
<script lang="ts">
import { list } from "../../../models/System/user";
import { getModuleList } from "../../../logicLib/System/user";
const OpenDrawer = () => import("./OpenDrawer.vue").then(m => m.default || m);
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "sys-user",

  layout: "menu",
  components: {
    OpenDrawer
  },
  asyncData({ app }) {
    return getModuleList(app, "").then((value: any) => {
      if (value.status === 0) {
        return {
          data: value.data
        };
      }
    });
  }
})
export default class SysUser extends Vue {
  form: Object = {};
  status: boolean = false;
  selectedRowKeys: string[] = [];
  options: string[] = ["详情", "密码"];
  visible: boolean = false;
  title: string = "添加";
  data: list[] = [];
  columns: any[] = [
    {
      title: "Name",
      dataIndex: "name",
      width: "20%"
    },
    {
      title: "Gender",
      dataIndex: "gender",
      width: "20%"
    },
    {
      title: "Email",
      dataIndex: "email"
    },
    {
      title: "Action",
      key: "action",
      width: 100,
      scopedSlots: { customRender: "action" }
    }
  ];
  roleList: any[] = [
    {
      id: 1,
      title: "基础角色"
    },
    {
      id: 2,
      title: "超级管理员角色"
    }
  ];
  Change(val: boolean) {
    this.status = !val;
  }
  handleSubmit() {
    console.log(this.form);
  }
  Reset() {
    this.form = {};
  }
  onSelectChange(val: string[]) {
    console.log(val, "选择的数组");
    this.selectedRowKeys = val;
  }
  emptySelect() {
    this.selectedRowKeys = [];
  }
  confirm(val: object) {
    console.log("点击了确定", val);
  }
  cancel() {
    console.log("点击了取消");
  }
  onClose() {
    this.visible = false;
  }
  Add() {
    this.visible = true;
    this.title = "添加";
  }
  Submit(val) {
    this.visible = false;
    console.log(val, "添加的值");
    this.$message.success("添加成功");
  }
  SureDelete() {
    console.log("批量删除");
  }
  Delete(record: any[]) {
    console.log(record);
  }
  SelectAction(title: string, record: any[]) {
    switch (title) {
      case "详情":
        this.visible = true;
        this.title = "详情";
        break;
      case "密码":
        break;
      case "删除":
        break;
      default:
        break;
    }
  }
}
</script>
<style>
</style>

